<template>
  <div class="x-catalogue-menu-item-iteration">
    <div
      class="u-trigger"
      :class="{
        'u-actived': activedId === index,
      }"
      :data-layer="layer"
      @click="() => clickMenuItem({ title, index })"
    >
      {{ title }}
    </div>

    <x-catalogue-menu-item-iteration
      v-for="item in children"
      v-bind="item"
      :key="item.index"
      :layer="layer + 1"
    ></x-catalogue-menu-item-iteration>
  </div>
</template>

<script setup name="XCatalogueMenuItemIteration">
import { inject } from 'vue'

// 菜单项迭代器
const props = defineProps({
  title: String, // 标题文案
  index: [String, Number],
  layer: {
    // 层级
    type: Number,
    default: 0,
  },
  children: Array, // 子数据
})

const clickMenuItem = inject('clickMenuItem', () => {})
const activedId = inject('activedId', null)
</script>

<style lang="scss" scoped>
.x-catalogue-menu-item-iteration {
  .u-trigger {
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
    }
    &.u-actived {
      color: var(--el-color-primary);
    }
  }
  & > .u-trigger {
    &[data-layer='1'] {
      padding-left: 10px;
    }
    &[data-layer='2'] {
      padding-left: 20px;
    }
  }
}
</style>
